<template>
  <ElDialog v-model="visible" :title="title" width="600px" @closed="onClosed">
    <div style="max-height: 300px; overflow-y: auto">
      <ElInput v-model="iconSearch" placeholder="搜索图标" clearable style="margin-bottom: 10px" />
      <div style="display: flex; flex-wrap: wrap; gap: 10px">
        <span
          v-for="icon in filteredIcons"
          :key="icon"
          style="padding: 6px; cursor: pointer; border: 1px solid #eee; border-radius: 4px"
          @click="handleSelect(icon)"
        >
          <IconifyIcon :icon="icon" width="24" height="24" />
        </span>
      </div>
    </div>
  </ElDialog>
</template>

<script setup lang="ts">
  import { Icon as IconifyIcon } from '@iconify/vue'
  import { ref, computed, watch, defineEmits, defineProps } from 'vue'

  const props = defineProps<{
    modelValue: boolean
    iconList?: string[]
    title?: string
  }>()

  const emit = defineEmits(['update:modelValue', 'select'])

  const visible = ref(props.modelValue)
  watch(
    () => props.modelValue,
    (v) => (visible.value = v)
  )
  watch(visible, (v) => emit('update:modelValue', v))

  const iconSearch = ref('')
  const icons = props.iconList ?? [
    'ri:home-line',
    'ri:home-2-line',
    'ri:home-3-line',
    'ri:home-4-line',
    'ri:home-5-line',
    'ri:home-6-line',
    'ri:home-7-line',
    'ri:home-8-line',
    'ri:home-gear-line',
    'ri:home-wifi-line',
    'ri:building-line',
    'ri:building-2-line',
    'ri:building-3-line',
    'ri:building-4-line',
    'ri:hotel-line',
    'ri:community-line',
    'ri:school-line',
    'ri:government-line',
    'ri:bank-line',
    'ri:store-line',
    'ri:store-2-line',
    'ri:store-3-line',
    'ri:hospital-line',
    'ri:ancient-gate-line',
    'ri:ancient-pavilion-line',
    'ri:tent-line',
    'ri:mail-line',
    'ri:mail-open-line',
    'ri:mail-send-line',
    'ri:mail-unread-line',
    'ri:mail-add-line',
    'ri:mail-check-line',
    'ri:mail-close-line',
    'ri:mail-download-line',
    'ri:mail-forbid-line',
    'ri:mail-lock-line',
    'ri:mail-settings-line',
    'ri:mail-star-line',
    'ri:mail-volume-line',
    'ri:inbox-line',
    'ri:inbox-2-line',
    'ri:inbox-archive-line',
    'ri:inbox-unarchive-line',
    'ri:cloud-line',
    'ri:cloud-off-line',
    'ri:attachment-line',
    'ri:profile-line',
    'ri:archive-line',
    'ri:archive-2-line',
    'ri:archive-drawer-line',
    'ri:archive-stack-line',
    'ri:at-line',
    'ri:award-line',
    'ri:medal-line',
    'ri:medal-2-line',
    'ri:verified-badge-line',
    'ri:bar-chart-line',
    'ri:bar-chart-horizontal-line',
    'ri:bar-chart-2-line',
    'ri:bar-chart-box-line',
    'ri:bar-chart-grouped-line',
    'ri:bubble-chart-line',
    'ri:pie-chart-line',
    'ri:pie-chart-2-line',
    'ri:pie-chart-box-line',
    'ri:donut-chart-line',
    'ri:line-chart-line',
    'ri:bookmark-line',
    'ri:bookmark-2-line',
    'ri:bookmark-3-line',
    'ri:briefcase-line',
    'ri:briefcase-2-line',
    'ri:briefcase-3-line',
    'ri:briefcase-4-line',
    'ri:briefcase-5-line',
    'ri:calculator-line',
    'ri:calendar-line',
    'ri:calendar-2-line',
    'ri:calendar-event-line',
    'ri:calendar-todo-line',
    'ri:calendar-check-line',
    'ri:calendar-close-line',
    'ri:calendar-schedule-line',
    'ri:customer-service-line',
    'ri:customer-service-2-line',
    'ri:flag-line',
    'ri:flag-2-line',
    'ri:flag-off-line',
    'ri:triangular-flag-line',
    'ri:global-line',
    'ri:honour-line',
    'ri:link-line',
    'ri:printer-line',
    'ri:printer-cloud-line',
    'ri:record-mail-line',
    'ri:reply-line',
    'ri:reply-all-line',
    'ri:send-plane-line',
    'ri:send-plane-2-line',
    'ri:projector-line',
    'ri:projector-2-line',
    'ri:slideshow-line',
    'ri:slideshow-2-line',
    'ri:slideshow-3-line',
    'ri:slideshow-4-line',
    'ri:presentation-line',
    'ri:window-line',
    'ri:window-2-line',
    'ri:stack-line',
    'ri:shake-hands-line',
    'ri:service-line',
    'ri:registered-line',
    'ri:trademark-line',
    'ri:advertisement-line',
    'ri:copyleft-line',
    'ri:copyright-line',
    'ri:creative-commons-line',
    'ri:creative-commons-by-line',
    'ri:creative-commons-nc-line',
    'ri:creative-commons-nd-line',
    'ri:creative-commons-sa-line',
    'ri:creative-commons-zero-line',
    'ri:megaphone-line',
    'ri:pass-valid-line',
    'ri:pass-pending-line',
    'ri:pass-expired-line',
    'ri:id-card-line',
    'ri:info-card-line',
    'ri:seo-line',
    'ri:chat-1-line',
    'ri:chat-2-line',
    'ri:chat-3-line',
    'ri:chat-4-line',
    'ri:message-line',
    'ri:message-2-line',
    'ri:message-3-line',
    'ri:chat-check-line',
    'ri:chat-delete-line',
    'ri:chat-forward-line',
    'ri:chat-upload-line',
    'ri:chat-download-line',
    'ri:chat-new-line',
    'ri:chat-settings-line',
    'ri:chat-unread-line',
    'ri:chat-search-line',
    'ri:chat-smile-line',
    'ri:chat-smile-2-line',
    'ri:chat-smile-3-line',
    'ri:chat-heart-line',
    'ri:chat-off-line',
    'ri:feedback-line',
    'ri:discuss-line',
    'ri:question-answer-line',
    'ri:questionnaire-line',
    'ri:video-chat-line',
    'ri:chat-voice-line',
    'ri:chat-quote-line',
    'ri:chat-follow-up-line',
    'ri:chat-poll-line',
    'ri:chat-history-line',
    'ri:chat-private-line',
    'ri:chat-thread-line',
    'ri:speak-line',
    'ri:emoji-sticker-line',
    'ri:text-to-speech-line',
    'ri:speech-to-text-line',
    'ri:pencil-line',
    'ri:edit-line',
    'ri:edit-2-line',
    'ri:ball-pen-line',
    'ri:quill-pen-line',
    'ri:pen-nib-line',
    'ri:ink-bottle-line',
    'ri:mark-pen-line',
    'ri:markup-line',
    'ri:edit-box-line',
    'ri:edit-circle-line',
    'ri:sip-line',
    'ri:brush-line',
    'ri:brush-2-line',
    'ri:brush-3-line',
    'ri:brush-4-line',
    'ri:paint-brush-line',
    'ri:contrast-line',
    'ri:contrast-2-line',
    'ri:drop-line',
    'ri:blur-off-line',
    'ri:contrast-drop-line',
    'ri:contrast-drop-2-line',
    'ri:color-filter-line',
    'ri:remix-line',
    'ri:compasses-line',
    'ri:compasses-2-line',
    'ri:scissors-line',
    'ri:scissors-cut-line',
    'ri:scissors-2-line',
    'ri:slice-line',
    'ri:eraser-line',
    'ri:ruler-line',
    'ri:ruler-2-line',
    'ri:pencil-ruler-line',
    'ri:pencil-ruler-2-line',
    'ri:t-box-line',
    'ri:input-method-line',
    'ri:artboard-line',
    'ri:artboard-2-line',
    'ri:crop-line',
    'ri:crop-2-line',
    'ri:screenshot-line',
    'ri:screenshot-2-line',
    'ri:focus-line',
    'ri:focus-2-line',
    'ri:focus-3-line',
    'ri:crosshair-line',
    'ri:crosshair-2-line',
    'ri:paint-line',
    'ri:palette-line',
    'ri:pantone-line',
    'ri:shape-line',
    'ri:shape-2-line',
    'ri:magic-line',
    'ri:anticlockwise-line',
    'ri:anticlockwise-2-line',
    'ri:clockwise-line',
    'ri:clockwise-2-line',
    'ri:hammer-line',
    'ri:tools-line',
    'ri:wrench-line',
    'ri:drag-drop-line',
    'ri:table-line',
    'ri:table-alt-line',
    'ri:layout-line',
    'ri:layout-2-line',
    'ri:layout-3-line',
    'ri:layout-4-line',
    'ri:layout-5-line',
    'ri:layout-6-line',
    'ri:layout-column-line',
    'ri:layout-row-line',
    'ri:layout-top-line',
    'ri:layout-right-line',
    'ri:layout-bottom-line',
    'ri:layout-left-line',
    'ri:layout-grid-line',
    'ri:layout-grid-2-line',
    'ri:layout-masonry-line',
    'ri:collage-line',
    'ri:painting-line',
    'ri:grid-line',
    'ri:circle-line',
    'ri:triangle-line',
    'ri:pentagon-line',
    'ri:hexagon-line',
    'ri:octagon-line',
    'ri:square-line',
    'ri:rectangle-line',
    'ri:shapes-line',
    'ri:shadow-line',
    'ri:layout-horizontal-line',
    'ri:layout-vertical-line',
    'ri:flip-horizontal-line',
    'ri:flip-vertical-line',
    'ri:align-item-horizontal-center-line',
    'ri:align-item-vertical-center-line',
    'ri:align-item-left-line',
    'ri:align-item-top-line',
    'ri:align-item-right-line',
    'ri:align-item-bottom-line',
    'ri:bug-line',
    'ri:bug-2-line',
    'ri:code-line',
    'ri:code-s-line',
    'ri:code-box-line',
    'ri:terminal-box-line',
    'ri:terminal-line',
    'ri:terminal-window-line',
    'ri:parentheses-line',
    'ri:brackets-line',
    'ri:braces-line',
    'ri:command-line',
    'ri:cursor-line',
    'ri:git-commit-line',
    'ri:git-pull-request-line',
    'ri:git-merge-line',
    'ri:git-branch-line',
    'ri:git-fork-line',
    'ri:git-close-pull-request-line',
    'ri:git-pr-draft-line',
    'ri:git-repository-line',
    'ri:git-repository-commits-line',
    'ri:git-repository-private-line',
    'ri:html5-line',
    'ri:css3-line',
    'ri:javascript-line',
    'ri:puzzle-line',
    'ri:puzzle-2-line',
    'ri:php-line',
    'ri:tv-line',
    'ri:tv-2-line',
    'ri:computer-line',
    'ri:mac-line',
    'ri:macbook-line',
    'ri:cellphone-line',
    'ri:smartphone-line',
    'ri:mobile-download-line',
    'ri:tablet-line',
    'ri:device-line',
    'ri:phone-line',
    'ri:instance-line',
    'ri:database-line',
    'ri:database-2-line',
    'ri:server-line',
    'ri:hard-drive-line',
    'ri:hard-drive-2-line',
    'ri:hard-drive-3-line',
    'ri:install-line',
    'ri:uninstall-line',
    'ri:save-line',
    'ri:save-2-line',
    'ri:save-3-line',
    'ri:sd-card-line',
    'ri:sd-card-mini-line',
    'ri:sim-card-line',
    'ri:sim-card-2-line',
    'ri:dual-sim-1-line',
    'ri:dual-sim-2-line',
    'ri:u-disk-line',
    'ri:battery-line',
    'ri:battery-charge-line',
    'ri:battery-low-line',
    'ri:battery-2-line',
    'ri:battery-2-charge-line',
    'ri:battery-saver-line',
    'ri:battery-share-line',
    'ri:cast-line',
    'ri:airplay-line',
    'ri:cpu-line',
    'ri:gradienter-line',
    'ri:keyboard-line',
    'ri:keyboard-box-line',
    'ri:mouse-line',
    'ri:sensor-line',
    'ri:router-line',
    'ri:radar-line',
    'ri:gamepad-line',
    'ri:remote-control-line',
    'ri:remote-control-2-line',
    'ri:device-recover-line',
    'ri:hotspot-line',
    'ri:phone-find-line',
    'ri:phone-lock-line',
    'ri:rotate-lock-line',
    'ri:restart-line',
    'ri:shut-down-line',
    'ri:fingerprint-line',
    'ri:fingerprint-2-line',
    'ri:barcode-line',
    'ri:barcode-box-line',
    'ri:qr-code-line',
    'ri:qr-scan-line',
    'ri:qr-scan-2-line',
    'ri:scan-line',
    'ri:scan-2-line',
    'ri:rss-line',
    'ri:gps-line',
    'ri:base-station-line',
    'ri:bluetooth-line',
    'ri:bluetooth-connect-line',
    'ri:wifi-line',
    'ri:wifi-off-line',
    'ri:signal-wifi-line',
    'ri:signal-wifi-1-line',
    'ri:signal-wifi-2-line',
    'ri:signal-wifi-3-line',
    'ri:signal-wifi-error-line',
    'ri:signal-wifi-off-line',
    'ri:wireless-charging-line',
    'ri:dashboard-2-line',
    'ri:dashboard-3-line',
    'ri:usb-line',
    'ri:rfid-line',
    'ri:ram-line',
    'ri:ram-2-line',
    'ri:file-line',
    'ri:file-2-line',
    'ri:file-3-line',
    'ri:file-4-line',
    'ri:sticky-note-line',
    'ri:sticky-note-add-line',
    'ri:sticky-note-2-line',
    'ri:file-edit-line',
    'ri:draft-line',
    'ri:file-paper-line',
    'ri:file-paper-2-line',
    'ri:receipt-line',
    'ri:file-text-line',
    'ri:file-list-line',
    'ri:file-list-2-line',
    'ri:file-list-3-line',
    'ri:bill-line',
    'ri:file-copy-line',
    'ri:file-copy-2-line',
    'ri:clipboard-line',
    'ri:survey-line',
    'ri:article-line',
    'ri:newspaper-line',
    'ri:news-line',
    'ri:file-zip-line',
    'ri:file-marked-line',
    'ri:task-line',
    'ri:todo-line',
    'ri:book-line',
    'ri:book-2-line',
    'ri:book-3-line',
    'ri:book-open-line',
    'ri:book-read-line',
    'ri:contacts-book-line',
    'ri:contacts-book-2-line',
    'ri:contacts-book-upload-line',
    'ri:booklet-line',
    'ri:contacts-book-3-line',
    'ri:file-code-line',
    'ri:file-pdf-line',
    'ri:file-pdf-2-line',
    'ri:file-word-line',
    'ri:file-ppt-line',
    'ri:file-excel-line',
    'ri:file-word-2-line',
    'ri:file-ppt-2-line',
    'ri:file-excel-2-line',
    'ri:file-hwp-line',
    'ri:keynote-line',
    'ri:numbers-line',
    'ri:pages-line',
    'ri:file-search-line',
    'ri:file-add-line',
    'ri:file-reduce-line',
    'ri:file-settings-line',
    'ri:file-upload-line',
    'ri:file-transfer-line',
    'ri:file-download-line',
    'ri:file-lock-line',
    'ri:file-chart-line',
    'ri:file-chart-2-line',
    'ri:file-image-line',
    'ri:file-music-line',
    'ri:file-video-line',
    'ri:file-gif-line',
    'ri:file-check-line',
    'ri:file-close-line',
    'ri:file-forbid-line',
    'ri:file-info-line',
    'ri:file-warning-line',
    'ri:file-unknow-line',
    'ri:file-user-line',
    'ri:file-shield-line',
    'ri:file-shield-2-line',
    'ri:file-damage-line',
    'ri:file-history-line',
    'ri:file-shred-line',
    'ri:file-cloud-line',
    'ri:contract-line',
    'ri:folder-line',
    'ri:folder-2-line',
    'ri:folder-3-line',
    'ri:folder-4-line',
    'ri:folder-5-line',
    'ri:folder-6-line',
    'ri:folders-line',
    'ri:folder-add-line',
    'ri:folder-reduce-line',
    'ri:folder-settings-line',
    'ri:folder-upload-line',
    'ri:folder-transfer-line',
    'ri:folder-download-line',
    'ri:folder-lock-line',
    'ri:folder-chart-line',
    'ri:folder-chart-2-line',
    'ri:folder-music-line',
    'ri:folder-image-line',
    'ri:folder-video-line',
    'ri:folder-check-line',
    'ri:folder-close-line',
    'ri:folder-forbid-line',
    'ri:folder-info-line',
    'ri:folder-warning-line',
    'ri:folder-unknow-line',
    'ri:folder-user-line',
    'ri:folder-shield-line',
    'ri:folder-shield-2-line',
    'ri:folder-shared-line',
    'ri:folder-received-line',
    'ri:folder-open-line',
    'ri:folder-keyhole-line',
    'ri:folder-zip-line',
    'ri:folder-history-line',
    'ri:folder-cloud-line',
    'ri:markdown-line'
  ]

  const filteredIcons = computed(() => icons.filter((icon) => icon.includes(iconSearch.value)))

  function handleSelect(icon: string) {
    emit('select', icon)
    visible.value = false
  }
  function onClosed() {
    iconSearch.value = ''
  }
</script>
